<template>
	<div class="login">
		<div class="login-box">
			<img src="/@/assets/login/login-l.png" alt="" />
			<div class="login-form">
				<el-form ref="ruleFormValid" :model="loginForm" :rules="loginRules">
					<div class="login-form-title">
						<img src="/@/assets/login/icon_logo.png" style="width: 149px; height: 38px" alt="" />
					</div>
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" :prefix-icon="User" />
					</el-form-item>
					<el-form-item prop="password">
						<el-input
							v-model="loginForm.password"
							type="password"
							placeholder="密码"
							:prefix-icon="Lock"
							@keyup.enter.native="handleLogin"
						/>
					</el-form-item>
					<el-form-item style="width: 100%">
						<el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width: 100%" @click.native.prevent="handleLogin">
							<span v-if="!loading">登录</span>
							<span v-else>登录中...</span>
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref,computed } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { signIn } from '/@/api/login/index';
import { ElMessage } from 'element-plus';
import { formatAxis } from '/@/utils/formatTime';
import { Session } from '/@/utils/storage';
import { useI18n } from 'vue-i18n';
import { NextLoading } from '/@/utils/loading';
import { User, Lock } from '@element-plus/icons-vue'


const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const validateUsername = (rule: any, value: string, callback: Function) => {
	if (!value) {
		callback(new Error('请输入用户名'));
	} else {
		callback();
	}
};
const validatePassword = (rule: any, value: string, callback: Function) => {
	if (value.length < 6) {
		callback(new Error('密码必须在6位以上'));
	} else {
		callback();
	}
};
let loginForm = ref({
	username: 'admin',
	password: '123456',
});
const loginRules = {
	username: [{ validator: validateUsername, trigger: 'blur' }],
	password: [{ validator: validatePassword, trigger: 'blur' }],
};
let loading = ref(false);
const ruleFormValid = ref();

// 登录
const handleLogin = () => {
	ruleFormValid.value.validate(async (valid: boolean) => {
		if (valid) {
			loading.value = true;
			const res = await signIn(loginForm.value);
			if (res.code != 0) {
				Session.set('token', res.data.token);
				signInSuccess(false)
			} else {
				ElMessage.error(res.msg);
			}
		} else {
			return false;
		}
	});
};

// 时间获取
const currentTime = computed(() => {
	return formatAxis(new Date());
});

// 登录成功后的跳转
const signInSuccess = (isNoPower: boolean | undefined) => {
	if (isNoPower) {
		ElMessage.warning('抱歉，您没有登录权限');
		Session.clear();
	} else {
		// 初始化登录成功时间问候语
		let currentTimeInfo = currentTime.value;
		// 登录成功，跳到转首页
		// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
		if (route.query?.redirect) {
			router.push({
				path: <string>route.query?.redirect,
				query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
			});
		} else {
			router.push('/');
		}
		//将声音默认设置为静音
		Session.set("audioFlag", false)

		// 登录成功提示
		const signInText = t('message.signInText');
		ElMessage.success(`${currentTimeInfo}，${signInText}`);
		// 添加 loading，防止第一次进入界面时出现短暂空白
		NextLoading.start();
		loading.value = false;
	}
};
</script>

<style lang="scss">
.login {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	// background: #476dbe;
	background-color: #333;
}

.login-box {
	width: 1000px;
	height: 474.38px;
	border-radius: 8px;
	display: flex;
	img {
		width: 60%;
		height: auto;
	}
}

.title {
	margin: 0px auto 10px auto;
	text-align: left;
	color: #707070;
}

.login-form {
	background: #ffffff;
	width: 40%;
	border-radius: 0px 8px 8px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	.el-form {
		width: 214px;
		height: 307px;
	}
	.el-form-item {
		margin-bottom: 30px;
	}
	.el-form-item.is-error .el-input__inner {
		border: 0 !important;
		border-bottom: 1px solid #fd7065 !important;
		background: #fff !important;
	}
	.input-icon {
		height: 32px;
		width: 18px;
		margin-left: -2px;
	}
	.el-input__inner {
		border: 0;
		border-bottom: 1px solid #e9e9e8;
		border-radius: 0;
		font-size: 12px;
		font-weight: 400;
		color: #333333;
		height: 32px;
		line-height: 32px;
	}
	.el-input__prefix {
		left: 0;
	}
	.el-input--prefix .el-input__inner {
		padding-left: 26px;
	}
	.el-input__inner::placeholder {
		color: #aeb5c4;
	}
	.el-form-item--medium .el-form-item__content {
		line-height: 32px;
	}
	.el-input--medium .el-input__icon {
		line-height: 32px;
	}
}

.login-btn {
	border-radius: 17px;
	padding: 11px 20px !important;
	margin-top: 10px;
	font-weight: 500;
	font-size: 12px;
	border: 0;
	font-weight: 500;
	color: #333333;
	// background: #09a57a;
	background-color: #ffc200;
	&:hover,
	&:focus {
		// background: #09a57a;
		background-color: #ffc200;
		color: #ffffff;
	}
}
.login-form-title {
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
	.title-label {
		font-weight: 500;
		font-size: 20px;
		color: #333333;
		margin-left: 10px;
	}
}
</style>
